<template>
    <div class="main">
        <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto; position: relative;">
            <div style="height: 40px;">
                <hu-button class="top-button" @click="add()" value="添加" size="small" />
                <hu-button class="top-button" @click="delBatch()" value="删除" size="small" />
                <span title="刷新" @click="selectList()">
                    <svg-icon class="refresh" icon-class="refresh" ></svg-icon>
                </span>
            </div>

            <hu-table 
                ref="table" 
                v-model="tIndex" 
                :tableInfo="tableInfo" 
                :checkbox=true 
                height-reduce="40px"
                option-width="160">
                <hu-button @click="view()" value="查看" size="mini" />&nbsp;
                <hu-button @click="edit()" value="编辑" size="mini" />&nbsp;
                <hu-button @click="delBatch()" value="删除" size="mini" />
            </hu-table>
            <hu-dialog :title="dialogTitle" top="20%" ref="dialogOpen" width="600px" @hu-dialog="resultDialog">
                <hu-input :readOnly="readOnly" v-model="info.name" title="数据源名称" />
                <hu-select-dict :readOnly="readOnly" v-model="info.databaseType" :selectDic="datasorceType" title="数据源类型" />
                <hu-select-dict :readOnly="readOnly" v-model="info.drive" :selectDic="datasorceDrive" title="数据源驱动" />
                <hu-input :readOnly="readOnly" v-model="info.url" title="数据源链接" />
                <hu-input :readOnly="readOnly" v-model="info.userName" title="数据源账号" />
                <hu-input-password :readOnly="readOnly" v-model="info.password" title="数据源密码" />
            </hu-dialog>
        </div>
        <div v-if="loading" style="width: 100%;height: 150px; position: relative;">
            <hu-loading type="circular" />
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { selectDataSourceList, addDataSource, deleteDataSource, updateDataSource } from '@/api/datasource'
import { isEmpty } from '@/utils/validate'
export default {
    name: '创建动态数据源',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            loading: true,
            isAdd: true,
            dialogTitle: null,
            readOnly: true,
            tIndex: [],
            info: {
                id: null,
                name: null,
                databaseType: null,
                drive: null,
                url: null,
                userName: null,
                password: null
            },
            tableInfo: {
                title: [
                    {
                        value: 'name',
                        label: '数据源名称',
                        width: '200'
                    }, {
                        value: 'databaseType',
                        label: '数据源类型',
                        width: '120'
                    }, {
                        value: 'drive',
                        label: '数据源驱动',
                        width: '220'
                    }, {
                        value: 'userName',
                        label: '数据源账号',
                        width: '200'
                    },
                ],
                value: []
            },
            datasorceDrive: [
                {
                    value: "com.mysql.cj.jdbc.Driver",
                    label: "com.mysql.cj.jdbc.Driver"
                }, {
                    value: "com.oracle.cj.jdbc.Driver",
                    label: "com.oracle.cj.jdbc.Driver",
                    disable: 0,
                },
            ],
            datasorceType: [
                {
                    value: "mysql",
                    label: "mysql"
                }, {
                    value: "oceanbase",
                    label: "oceanbase",
                    disable: 0,
                }, {
                    value: "oracle",
                    label: "oracle",
                    disable: 1,
                }
            ],
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {
        this.selectList()
    },
    watch: {

    },
    methods: {
        selectList() {
            this.loading = true
            selectDataSourceList().then((res) => {
                this.loading = false
                this.tableInfo.value = res.data.data
            }).catch((error) => {
                this.loading = false
                this.$huTip({ type: "error", value: error })
            })
        },
        add() {
            this.resetForm()
            this.isAdd = true
            this.readOnly = false
            this.dialogTitle = '添加数据源'
            this.$refs.dialogOpen.openDialog()
        },
        view() {
            this.init()
            this.readOnly = true
            this.dialogTitle = '查看'
            this.$refs.dialogOpen.openDialog()
        },
        edit() {
            this.init()
            this.isAdd = false
            this.readOnly = false
            this.dialogTitle = '编辑'
            this.$refs.dialogOpen.openDialog()
        },
        delBatch() {
            if(isEmpty(this.tIndex)) {
                this.$huTip({ type: "warning", value: "至少选择一个数据源" })
                return
            }
            let names = []
            let ids = []
            for (let item of this.tIndex) {
                names.push(this.tableInfo.value[item].name)
                ids.push(this.tableInfo.value[item].id)
            }
            this.$huConfirm({
                title: "确认删除",
                content: `将删除[<span style="color:rgba(253, 131, 0, 0.7)">${names}</span>]数据源, 是否继续？`,
                onConfirm: () => {
                    deleteDataSource(ids).then((res) => {
                        this.selectList()
                        this.$huTip({ type: 'success', value: "删除成功" })
                    }).catch((error) => {
                        this.$huTip({ type: "error", value: error })
                    })
                    this.resetChecked()
                },
                onCancel:() => {
                    this.resetChecked()
                },
            })
            
        },
        resultDialog(val) {
            if (val) {
                if(this.isEmptyForm(this.info)) {
                    this.$huTip({ type: "warning", value: '抱歉，表单有未填项' })
                    return
                }
                if(this.isAdd) {
                    addDataSource(this.info).then((res) =>{
                        this.selectList()
                        this.$huTip({ type: 'success', value: "添加成功" })
                        this.$refs.dialogOpen.closeDialog()
                    }).catch((error) => {
                        this.$huTip({ type: "error", value: error })
                    })
                } else {
                    updateDataSource(this.info).then((res) =>{
                        this.selectList()
                        this.$huTip({ type: 'success', value: "更新成功" })
                        this.$refs.dialogOpen.closeDialog()
                    }).catch((error) => {
                        this.$huTip({ type: "error", value: error })
                    })
                }
            } else {
                this.resetForm()
            }
        },
        init() {
            let selectItem = this.tableInfo.value[this.tIndex[0]]
            for (let key in this.info) {
                this.info[key] = selectItem[key] + ""
            }
        },
        resetForm() {
            for (let key in this.info) {
                this.info[key] = null
            }
        },
        resetChecked() {
            this.tIndex = []
            this.$refs.table.resetChecked()
        },
        isEmptyForm(form) {
            for(let key in form) {
                if(isEmpty(form[key]) && key != 'id' ) {
                    return true
                }
            }
            return false
        }
    },
}
</script>
<style lang="scss" scoped>
.main {
    box-sizing: unset;
    position: relative;
}
.top-button{
    margin-left: 0px;
    margin-right: 10px;
    margin-top: 8px;
    margin-bottom: 8px;
}
.refresh {
    position: absolute; 
    right: 0px; 
    top: 10px; 
    font-size: 16px; 
    cursor: pointer;
}
</style>